<template>
  <div class="weather-page">
    <van-nav-bar
      title="天气预报"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="weather-container">
      <div class="search-bar">
        <van-search
          v-model="searchCity"
          placeholder="搜索城市"
          @search="searchWeather"
          shape="round"
        />
      </div>
      
      <div class="current-weather" v-if="currentWeather">
        <div class="city-info">
          <div class="city-name">{{ currentWeather.city }}</div>
          <div class="weather-date">{{ currentWeather.date }}</div>
        </div>
        
        <div class="weather-info">
          <div class="temperature">{{ currentWeather.temperature }}°</div>
          <div class="weather-condition">
            <van-icon :name="getWeatherIcon(currentWeather.condition)" size="40" />
            <span>{{ currentWeather.condition }}</span>
          </div>
        </div>
        
        <div class="weather-details">
          <div class="detail-item">
            <van-icon name="guide-o" />
            <span>{{ currentWeather.wind }}</span>
          </div>
          <div class="detail-item">
            <van-icon name="eye-o" />
            <span>{{ currentWeather.humidity }}%</span>
          </div>
          <div class="detail-item">
            <van-icon name="umbrella-circle-o" />
            <span>{{ currentWeather.precipitation }}mm</span>
          </div>
        </div>
      </div>
      
      <div class="forecast-list" v-if="forecastList.length > 0">
        <div class="section-title">未来天气预报</div>
        <div class="forecast-items">
          <div 
            v-for="(item, index) in forecastList" 
            :key="index"
            class="forecast-item"
            @click="navigateToDetail(item)"
          >
            <div class="forecast-day">{{ item.day }}</div>
            <van-icon :name="getWeatherIcon(item.condition)" size="24" />
            <div class="forecast-temp">{{ item.tempLow }}° / {{ item.tempHigh }}°</div>
            <div class="forecast-condition">{{ item.condition }}</div>
          </div>
        </div>
      </div>
      
      <div class="empty-state" v-if="!currentWeather">
        <van-empty description="请搜索城市查看天气" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const searchCity = ref('')
const currentWeather = ref(null)
const forecastList = ref([])

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 搜索天气
const searchWeather = () => {
  if (!searchCity.value.trim()) {
    showToast('请输入城市名称')
    return
  }
  
  // 模拟API调用
  setTimeout(() => {
    // 模拟数据
    currentWeather.value = {
      city: searchCity.value,
      date: new Date().toLocaleDateString(),
      temperature: Math.floor(Math.random() * 15) + 15, // 15-30度
      condition: getRandomCondition(),
      wind: `${Math.floor(Math.random() * 5) + 1}级`,
      humidity: Math.floor(Math.random() * 30) + 50, // 50-80%
      precipitation: (Math.random() * 10).toFixed(1) // 0-10mm
    }
    
    // 生成未来5天预报
    forecastList.value = []
    const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const today = new Date().getDay()
    
    for (let i = 1; i <= 5; i++) {
      const dayIndex = (today + i) % 7
      forecastList.value.push({
        day: days[dayIndex],
        condition: getRandomCondition(),
        tempLow: Math.floor(Math.random() * 10) + 10, // 10-20度
        tempHigh: Math.floor(Math.random() * 10) + 20 // 20-30度
      })
    }
    
    showToast('天气数据获取成功')
  }, 1000)
}

// 获取随机天气状况
const getRandomCondition = () => {
  const conditions = ['晴', '多云', '阴', '小雨', '中雨', '大雨', '雷阵雨', '小雪', '中雪']
  return conditions[Math.floor(Math.random() * conditions.length)]
}

// 根据天气状况获取图标
const getWeatherIcon = (condition) => {
  switch (condition) {
    case '晴': return 'sunny-o'
    case '多云': return 'cloud-o'
    case '阴': return 'cloud-o'
    case '小雨': return 'wap-nav'
    case '中雨': return 'wap-nav'
    case '大雨': return 'wap-nav'
    case '雷阵雨': return 'wap-nav'
    case '小雪': return 'wap-nav'
    case '中雪': return 'wap-nav'
    default: return 'sunny-o'
  }
}

// 导航到详情页
const navigateToDetail = (item) => {
  router.push({
    name: 'WeatherDetail',
    params: { city: searchCity.value },
    query: { day: item.day }
  })
}

// 初始化时默认搜索北京
searchCity.value = '北京'
searchWeather()
</script>

<style lang="scss" scoped>
.weather-page {
  min-height: 100vh;
  background-color: var(--background-color);
  
  .weather-container {
    padding: 16px;
    
    .current-weather {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-1);
      
      .city-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .city-name {
          font-size: 24px;
          font-weight: 600;
          color: var(--text-color);
        }
        
        .weather-date {
          font-size: 14px;
          color: var(--text-color-tertiary);
        }
      }
      
      .weather-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        .temperature {
          font-size: 48px;
          font-weight: 300;
          color: var(--text-color);
        }
        
        .weather-condition {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          span {
            margin-top: 8px;
            font-size: 16px;
            color: var(--text-color);
          }
        }
      }
      
      .weather-details {
        display: flex;
        justify-content: space-between;
        
        .detail-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .van-icon {
            font-size: 20px;
            color: var(--primary-color);
            margin-bottom: 4px;
          }
          
          span {
            font-size: 14px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
    
    .forecast-list {
      background-color: var(--background-color-light);
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow-1);
      
      .section-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 16px;
      }
      
      .forecast-items {
        display: flex;
        overflow-x: auto;
        padding-bottom: 8px;
        
        &::-webkit-scrollbar {
          height: 4px;
        }
        
        &::-webkit-scrollbar-thumb {
          background-color: var(--border-color);
          border-radius: 2px;
        }
        
        .forecast-item {
          flex: 0 0 auto;
          width: 80px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 12px 8px;
          border-radius: 8px;
          margin-right: 12px;
          
          &:hover {
            background-color: var(--background-color);
          }
          
          .forecast-day {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 8px;
          }
          
          .forecast-temp {
            font-size: 14px;
            color: var(--text-color);
            margin: 8px 0;
          }
          
          .forecast-condition {
            font-size: 12px;
            color: var(--text-color-tertiary);
          }
        }
      }
    }
    
    .empty-state {
      margin-top: 40px;
    }
  }
}
</style> 